<template>
  <el-card shadow="always">
    <el-row :gutter="20">
      <el-col :span="12">
        <span class="left-toolbarClass">
          更新日志
        </span>
      </el-col>
    </el-row>
    <div class="info-class">
      <el-row style="margin-top: 10px">
        <el-collapse accordion>
          <el-collapse-item
            v-for="(item, index1) in updateLog"
            :key="index1"
            :title="item.version"
          >
            <div
              v-for="(listItem, index2) in item.versionList"
              :key="index2"
              style="font-size: 14px; margin-left: 10px; margin-top: 5px"
            >{{ listItem }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-row>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'UpdateLog',
  data() {
    return {
      updateLog: []
    }
  },
  mounted() {
    fetch('/updateLog.json')
      .then(response => response.json())
      .then(data => {
        this.updateLog = data.list.reverse()
      })
  }
}
</script>

<style scoped>

</style>
<style>
  .left-toolbarClass {
    font-weight: bold;
    font-size: 18px;
    color: #525151;
  }
  .info-class {
    max-height: 568px;
    overflow-y: auto;
    margin-right: -10px;
  }
</style>
